<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .marquee-container {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
        }

        .ad-items {
            display: flex;
            will-change: transform;
            animation-play-state: paused;
        }

        .ad-item {
            display: inline-block;
            padding: 0 10px;
            & img {
                width: 100px;
            }
        }

        .ad-items::before,
        .ad-items::after {
            content: "";
            display: inline-block;
            width: 100%;
        }
        .ad-item:last-child{
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="marquee-container">
        <div id="scrollingItems" class="ad-items">
            <!-- 第一个和最后一个广告项是为了无缝衔接 -->
            <div class="ad-item">
                <a href="#"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.63041927f4a82c69be9154fe7be5dcd8?rik=rEmOJUuEAW8hPQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f22%2f1522.jpg&ehk=yPnRjbJRaymFBmY2UhpFn2DPanf0HBpPLctjo3h3vRA%3d&risl=&pid=ImgRaw&r=0" alt="广告1"></a>
            </div>
            <!-- 其他广告项 -->
            <div class="ad-item">
                <a href="#"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.63041927f4a82c69be9154fe7be5dcd8?rik=rEmOJUuEAW8hPQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f22%2f1522.jpg&ehk=yPnRjbJRaymFBmY2UhpFn2DPanf0HBpPLctjo3h3vRA%3d&risl=&pid=ImgRaw&r=0" alt="广告2"></a>
            </div>
            <!-- 更多广告项... -->
            <div class="ad-item">
                <a href="#"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.63041927f4a82c69be9154fe7be5dcd8?rik=rEmOJUuEAW8hPQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f22%2f1522.jpg&ehk=yPnRjbJRaymFBmY2UhpFn2DPanf0HBpPLctjo3h3vRA%3d&risl=&pid=ImgRaw&r=0" alt="广告1"></a>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const container = document.querySelector('.marquee-container');
            const items = document.getElementById('scrollingItems');

            // 计算需要滚动的距离（等于容器宽度）
            const containerWidth = container.offsetWidth;

            // 检查并计算需要多少个广告项来达到无缝衔接
            const itemWidth = items.children[0].offsetWidth;
            let repeatCount = Math.ceil(containerWidth / itemWidth);
            if (repeatCount === 1) repeatCount++; // 至少需要两个广告项才能滚动

            // 动态添加足够数量的重复广告项以实现无缝
            while (items.childElementCount < repeatCount + 1) {
                const firstItemClone = items.firstElementChild.cloneNode(true);
                items.appendChild(firstItemClone);
            }
            const lastItemClone = items.lastElementChild.cloneNode(true);
            items.insertBefore(lastItemClone, items.firstChild);

            // 计算滚动动画时间（例如：每秒滚动一个广告项）
            const duration = 10; // 可以根据需求调整滚动速度
            const scrollTime = `${containerWidth / itemWidth * duration}s`;

            // 添加动画样式
            items.style.animation = `marquee ${scrollTime} linear infinite`;
        });
    </script>

    <style>
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
    </style>
</body>
</html>